import Sty from "../../../style/square/index.module.css";
import { EyeOutline } from 'antd-mobile-icons'
import { useHistory } from "react-router";


export default () => {
  let history=useHistory()
  const newsData = [{ id: 1, img_src: require("../../../images/welf_news_img.png").default, time: '2021-12-20', title: '爱心捐赠让闲置物品的不...', des: '9月18日玉溪市中医院、玉溪市供排水有限公司、城投党委的5名在职党员带着单位爱心人士以及泷水塘社...', fabulous: 123, see: 123, comment: 123 }, { id: 2, img_src: require("../../../images/welf_news_img.png").default, time: '2021-12-20', title: '慈善100慈善公益活动第...', des: '9月18日玉溪市中医院、玉溪市供排水有限公司、城投党委的5名在职党员带着单位爱心人士以及泷水塘社...', fabulous: 123, see: 123, comment: 123 },
    { id: 3, img_src: require("../../../images/welf_news_img.png").default, time: '2021-12-20', title: '福州市举行慈善复明行动...', des: '9月18日玉溪市中医院、玉溪市供排水有限公司、城投党委的5名在职党员带着单位爱心人士以及泷水塘社...', fabulous: 123, see: 123, comment: 123 }]
    const goDetail = (ind:any) => {
    history.push({pathname:`/weafdetail/${ind}`,state:newsData[ind]})
    
  }
  const newsDataMap = () => {
    return newsData.map((item,index) => {
      return <li className={Sty.welfare_news_li} key={item.id}  onClick={()=>{goDetail(index)}}>
				<div className={Sty.welfare_news_li_l}>
					<img src={item.img_src} alt="" />
					<p>{ item.time}</p>
				</div>
				<div className={Sty.welfare_news_li_r}>
					<p className={Sty.welfare_news_li_r_title}>{item.title}</p>
					<p className={Sty.welfare_news_li_r_des}>{item.des}</p>
					 <div className={Sty.user_r_box}>
            <div> <i className={Sty.fabulous}></i><span>{ item.fabulous}</span></div>
            <div><EyeOutline fontSize={12}/><span></span>{ item.see}</div>
            <div><i className={Sty.common}></i><span></span>{ item.comment}</div>
          </div>
				</div>

      </li>
    })
  }
  return <div className={Sty.welfare_box}>
    <div className={Sty.welfare_banner} onClick={()=>history.push("weafactive")}>
      <img src={require("../../../images/welf_banner.png").default} alt=""/>
    </div>
    <div className={Sty.welfare_news}>
      <h2 className={Sty.welfare_news_title}>公益新闻</h2>
			<ul>
				{newsData.length>0?newsDataMap():[]}
			</ul>
    </div>
  </div>
}